<template>
    <div class="content">
        <el-form :model="formData" ref="formref" :rules="rules" label-width="88px" :inline="false" size="normal">
            <el-form-item label="商品名称" prop="pname">
                <el-input v-model="formData.pname"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="subname">
                <el-input v-model="formData.subname"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="imgurl">
                <!-- <el-input v-model="formData.imgurl"></el-input> -->
                <TuKu v-model="formData.imgurl"></TuKu>
            </el-form-item>
            <el-form-item label="最小价格" prop="oldprice">
                <el-input v-model="formData.oldprice"></el-input>
            </el-form-item>
            <el-form-item label="最大价格">
                <el-input v-model="formData.newprice"></el-input>
            </el-form-item>
            <el-form-item label="款式颜色">
                <el-input v-model="formData.color"></el-input>
            </el-form-item>
            <el-form-item label="款式样式" prop="size">
                <el-input v-model="formData.size"></el-input>
            </el-form-item>
            <el-form-item label="销量">
                <el-input v-model="formData.count"></el-input>
            </el-form-item>
            <el-form-item label="父目录ID" prop="category_id">
                <!-- <el-input v-model="formData.parentId"></el-input> -->
                <el-tree-select v-model="formData.category_id" :data="CategoryTreeData" check-strictly
                    :render-after-expand="false" style="width: 240px" />
            </el-form-item>
            <el-form-item label="商品介绍">
               <Editors v-model="formData.description"></Editors>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formref)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>

    </div>


</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import TuKu from '../../components/TuKu.vue';
import { CategoryApi,ProductApi } from '../../api';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import Editors from '../../components/Editors.vue';
const router = useRouter();
const formref = ref(null);
const formData = reactive({
    pname: '',
    subname: '',
    imgurl: '',
    oldprice: null,
    newprice: null,
    color: '',
    size: '',
    count: null,
    category_id: null,
    description:''
})
const rules = reactive({
    pname: [
        { required: true, message: '请输入商品的名称', trigger: 'blur' },
    ],
    subname: [
        { required: true, message: '请输入副标题的名称', trigger: 'blur' },
    ],
})
//树形选择结构
const CategoryTreeData = ref([
    {
        value: 0,
        label: '一级目录',
    }
])

onMounted(() => {
    CallCategoryApi()
})

//下拉列表
const CallCategoryApi = () => {
    CategoryApi.select.call().then(res => {
        res.forEach(item => {
            item.value = item.id
            item.label = item.cname
        })
        console.log(res);
        const categoryTreeList = res.reduce((hezi, currentValue) => {
            currentValue.children = res.filter(item => {
                return item.parentId == currentValue.id
            })
            if (currentValue.parentId == 0) {
                hezi.push(currentValue)
            }
            return hezi;
        }, [])
        console.log(categoryTreeList);
        CategoryTreeData.value = categoryTreeList

    })
}

const formSubmit = () => {
    ProductApi.insert.call({
        pname: formData.pname,
        subname: formData.subname,
        imgurl: formData.imgurl,
        oldprice: formData.oldprice,
        newprice: formData.newprice,
        color: formData.color,
        size: formData.size,
        count: formData.count,
        category_id: formData.category_id,
        description:formData.description
    }).then(res => {
        console.log(res);
        if (res == 1) {
            ElMessage.success('添加成功')
            router.push('/product/list')
           
        }
    })
}

const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.el-input{
    width: 300px;
}
.el-form{
   padding-top: 20px;
    /* margin-left: 30%; */
   :deep(.el-form-item__label){
    color: rgb(11, 1, 1);
    font-weight: 800;
   }
}
.content{
    background: url('../../assets/add.png')no-repeat;
    background-size: 100% 100%;
  
}
</style>